Gosh,
where do I start... HTML tables allow you to customise
the design and layout of your web page. For instance,
using tables you can split your page into several columns
(like a newspaper) or even add margins. In fact, almost
any layout you can conceive!
Do not worry if you do not understand
this tutorial after your first read through, tables
can be tricky to understand. Take your time, follow
the examples provided and all should become clear soon.
A HTML table is contained between
the tags, <TABLE>
and </TABLE>. Tables
consist of columns and rows. <TR> indicates the start of a new row. <TD> indicates the start of a cell within a row
and </TD> indicates
the end of a cell. Below is an example of a basic table.
<TABLE BORDER=1>
<TR>
<TD>cell 1</TD>
<TD>cell 2</TD>
<TR>
<TD>cell 3</TD>
<TD>cell 4</TD>
</TABLE> |
cell 1 |
cell 2 |
cell 3 |
cell 4 |
|
The tags, <TABLE>, <TR>
and <TD> all have
attributes associated with them. Below, the key attributes
of these tags are discussed.
The key attributes of the tag, <TABLE> are:
- ALIGN=""
Align the entire table LEFT, RIGHT
or CENTER.
- BORDER=
How thick,
in pixels, should the border be? (=0 no border at all)
- CELLPADDING=
The
margin, in pixels, between the cells border and
its content.
- CELLSPACING=
The
spacing, in pixels, between each cell.
- WIDTH=
The total
width of the table. This value can either be in
pixels or a percentage (in relation to browser window).
The key attributes of the tag, <TR> are:
- ALIGN=""
The alignment of each cells contents in the row
LEFT, RIGHT or CENTER.
- VALIGN=""
The vertical alignment of each cells contents in
the row TOP, MIDDLE or BOTTOM.
The key attributes of the tag, <TD> are:
- ALIGN=""
The alignment of the cells contents LEFT, RIGHT or CENTER.
The default is LEFT.
- BGCOLOR="#rrggbb"
The background color of the cell, in rrggbb format.
- COLSPAN=
The number
of columns the cell should span.
- ROWSPAN=
The number
of rows the cell should span.
- NOWRAP=""
Do not allow the cells contents to wrap (like a
word processor) YES
or NO.
- VALIGN=""
The vertical alignment the cells contents TOP, MIDDLE
or BOTTOM.
Here are some examples for you to
try out ;-)
<TABLE ALIGN="CENTER" BORDER=1 CELLPADDING=16
CELLSPACING=4 WIDTH=80%>
<TR ALIGN="RIGHT">
<TD>cell 1</TD>
<TD>cell 2</TD>
<TD>cell 3</TD>
<TD>cell 4</TD>
<TR VALIGN="TOP">
<TD>cell 5</TD>
<TD>cell 6</TD>
<TD>cell 7</TD>
<TD>cell 8</TD>
</TABLE>
<TABLE ALIGN="RIGHT" CELLPADDING=8 CELLSPACING=4
WIDTH=300>
<TR>
<TD ALIGN="LEFT">cell 1</TD>
<TD ALIGN="CENTER">cell 2</TD>
<TD ALIGN="RIGHT">cell 3</TD>
<TR>
<TD BGCOLOR="#FF0000">cell 4</TD>
<TD BGCOLOR="#00FF00">cell 5</TD>
<TD BGCOLOR="#0000FF">cell 6</TD>
</TABLE>
<TABLE ALIGN="CENTER" BORDER=1 CELLPADDING=8
CELLSPACING=4>
<TR>
<TD COLSPAN=2 ROWSPAN=1>cell 1</TD>
<TD COLSPAN=1 ROWSPAN=1>cell 2</TD>
<TR>
<TD COLSPAN=1 ROWSPAN=1>cell 3</TD>
<TD COLSPAN=2 ROWSPAN=2>cell 4</TD>
<TR>
<TD COLSPAN=1 ROWSPAN=1>cell 5</TD>
</TABLE>
Below is a very complicated table! If you're feeling brave,
why not try and work out the HTML code ;-)
|